<template>
	<view class="app">
		<view class="Setting">
			<AppNavbar :bgColor="'#ededed'" title="Account and security" titlecolor="#000"  leftIconColor="#000"  fontWeight="600">
			</AppNavbar>
			<mySettings :list="abilitys" class="mt-2 font-weight-600"></mySettings>
			<mySettings :list="abilitys2" class="mt-4 font-weight-600"></mySettings>
		</view>

	</view>
</template>

<script setup>
	// import mySettings from '/components/my-settings.vue';
	import {
		reactive,
		ref
	} from 'vue';
	const show = ref(false)
	const abilitys = reactive([{
			label: "E-Mail",
			value: 'Minna@gamull.com'
		},
 

	])
	const abilitys2 = reactive([{
			label: "Login password",
			value: 'Hab been set'
		},
		{
			label: "Login Device management",
		},
		{
			label: "Current device",

			url: "/pages/Setting/LoginDevice",
			value: 'Mi 13'
		},
	])

	function goto(url) {
		uni.$to(url)
	}

	function addDeviceFun() {

	}
</script>

<style lang="scss" scoped>
	.app {
		.Setting {

			// border: 1px solid red;
			background-color: #ededed;


			.Setting-abilitys {
				// border: 1px solid red;
				background-color: #fff;

				.Setting-ability-item {
					flex-wrap: wrap;

					.Setting-ability-item-left {
						image {
							width: 45rpx;
							height: 45rpx;
						}
					}

					.Setting-ability-item-detail {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}
</style>